<template>
  <div class="topheader">
    <div class="bgImg">
      <img src="https://z3.ax1x.com/2021/04/25/czF0pQ.png" alt="" />
    </div>
    <div class="paihangbang">排行榜</div>
    <div class="top">Top 150</div>
  </div>
</template>
<script>
export default {
  name: "TopHeader",
};
</script>
<style lang="scss" scoped>
.topheader {
  position: relative;
  margin-top: 10vh;
  height: 2rem;
  padding: 0.16rem 1.15rem 0.6rem;
  .paihangbang {
    position: absolute;
    top: 1.8rem;
    font-size: 0.36rem;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
  .top {
    position: absolute;
    top: 1rem;
    font-size: 0.64rem;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(69, 87, 107);
    font-weight: 700;
  }
  .bgImg img {
    width: 3.6rem;
    height: 1.94rem;
  }
  .bgImg {
    text-align: center;
  }
}
</style>